<!-- login -->
<template>
	<div class="login">
		<div class="login-box">
			<el-avatar
				id="avatar"
				shape="square"
				:size="100"
				src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
			></el-avatar>
			<el-form
				:model="loginForm"
				:rules="loginRules"
				:status-icon="true"
				ref="loginRef"
				label-width="auto"
			>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="loginForm.username" size="medium"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input show-password v-model="loginForm.password" size="medium"></el-input>
				</el-form-item>
				<el-form-item label="用户身份">
					<el-radio-group v-model="loginForm.level">
						<el-radio label="0">普通用户</el-radio>
						<el-radio label="1">学生</el-radio>
						<el-radio label="2">教师</el-radio>
						<el-radio label="3">超级管理</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="验证码" prop="captcha">
					<el-input v-model="loginForm.captcha" size="medium"></el-input>
					<img
						ref="captcha"
						@click="changeCaptchaFn('captcha')"
						id="captcha"
						src="http://localhost:8000/api/account/captcha"
						height="36"
						alt
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="submitForm('loginRef')" size="medium"
						>立即创建</el-button
					>
					<el-button type="info" @click="resetForm('loginRef')" size="medium"
						>重置</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
//import <组件名称> from '<组件路径>';

// import qs from 'qs';
import { userLoginApi } from '@/api/user.js';
import { setToken } from '@/utils/auto.js';
export default {
	//注册import导入的组件
	components: {},
	//数据
	data() {
		return {
			loginForm: {
				username: '',
				password: '',
				level: '0',
				captcha: '',
			},
			loginRules: {
				username: [
					{ required: true, message: '请输入用户', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
				],
				captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
			},
		};
	},
	//计算属性
	computed: {},
	//侦听器
	watch: {},
	//方法
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					try {
						const result = await userLoginApi(this.loginForm);
						this.changeCaptchaFn('captcha');
						setToken(result.data.data.data.token);
						localStorage.setItem('username', result.data.data.data.username);
						localStorage.setItem('level', result.data.data.data.level);
						this.$router.push('/admin');
					} catch (error) {
						this.changeCaptchaFn('captcha');
						this.loginForm.password = '';
						this.loginForm.captcha = '';
						// 		// 注意，error不是对象，error.response才是对象
						this.$message.error(error.response.data.meta.message);
					}
				} else {
					this.$message.error('恭喜你，你输入的格式不对哟！');
					this.changeCaptchaFn('captcha');
					this.loginForm.password = '';
					this.loginForm.captcha = '';
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		changeCaptchaFn(ref) {
			this.$refs[ref].src = this.$refs[ref].src + '?t=' + new Date().getTime();
		},
	},
};
</script>
<style lang="less" scoped>
.login {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url('~@/assets/images/login/bgc.jpg') center;
	background-size: cover;
	.login-box {
		background-image: linear-gradient(120deg, #a1c4fda7 0%, #c2e9fba3 100%);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 30px 30px;
		width: 400px;
		height: 270px;
		border-radius: 5px;
		#avatar {
			position: absolute;
			top: -25%;
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 0px 0px 10px 5px #ccc;
		}
		.el-form {
			.el-form-item {
				margin-bottom: 1rem;
				&:nth-child(3) {
					margin-bottom: 0;
				}
				.el-radio-group {
					> label {
						margin-right: 0.5rem;
					}
				}
				#captcha {
					position: absolute;
					right: 0;
					top: 3px;
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
					z-index: 99;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
